<template>
  <div class="dashboard-editor-container" id="Index">
    <panel-group @handleSetLineChartData="handleSetLineChartData"/>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-row>
        <el-tag>网关地区分布</el-tag>
      </el-row>
      <el-row style="margin-top: 10px">
        <el-col :span="12">
          <el-table :data="topRateGatewayGeo" height="400px">
            <el-table-column label="排名" type="index" width="150"></el-table-column>
            <el-table-column label="地区" prop="name" width="150"/>
            <el-table-column label="数量" prop="value" width="150"/>
          </el-table>
        </el-col>
        <el-col :span="12">
          <china-map :chart-data="gatewayGroChartData" height="400px"/>
        </el-col>
      </el-row>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-tag>用户数据</el-tag>
      <line-chart
        title="用户数据"
        :chart-data="lineChartData"
      />
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-tag>设备新增数</el-tag>
      <bar-chart :chart-data="deviceCountChartData"/>
    </el-row>

    <el-row style="background:#fff;padding:16px 16px 0;margin-bottom:32px;">
      <el-tag>产品前十排名</el-tag>
      <bar-chart :chart-data="topTenDeviceChartData"/>
    </el-row>
  </div>
</template>

<script>
import PanelGroup from './dashboard/PanelGroup'
import LineChart from './dashboard/LineChart'
import RaddarChart from './dashboard/RaddarChart'
import PieChart from './dashboard/PieChart'
import BarChart from './dashboard/BarChart'
import ChinaMap from './dashboard/ChinaMap'
import {
  getGatewayGeoChartCount,
  getSevenDayActiveDataCount,
  getSevenDayDeviceDataCount,
  getSevenDayRegisterDataCount, getTopTenDeviceCount
} from '@/api/system/userTable'

const lineChartData = {
  userCount: {
    time: [],
    count: [],
    count2: []
  }
}

export default {
  name: 'Index',
  components: {
    PanelGroup,
    LineChart,
    RaddarChart,
    PieChart,
    BarChart,
    ChinaMap
  },
  data() {
    return {
      test: '',
      lineChartData: lineChartData.userCount,
      deviceCountChartData: { xAxisData: [], data: [] },
      topTenDeviceChartData: { xAxisData: [], data: [] },
      gatewayGroChartData: { data: [] }
    }
  },
  computed: {
    topRateGatewayGeo() {
      return this.gatewayGroChartData.data.filter((item, index) => {
        return index < 8
      })
    }
  }
  ,
  created() {
    this.getDataByWeek()
    this.getSevenDaysDeviceCount()
    this.getTopTenDeviceCount()
    this.getGatewayGeoChartCount()
  },

  methods: {
    handleSetLineChartData(type) {
      this.lineChartData = lineChartData['userCount']
    },

    // 查询七日内注册量和活跃度
    getDataByWeek() {
      getSevenDayRegisterDataCount().then(response => {
        let time = []
        let count = []

        response.data.reverse()
        for (let i = 0; i < (response.data).length; i++) {
          time.push((response.data)[i].time)
          count.push((response.data)[i].count)
        }

        lineChartData.userCount.count = count
        lineChartData.userCount.time = time

        getSevenDayActiveDataCount().then(response => {
          let count2 = []

          response.data.reverse()
          for (let i = 0; i < (response.data).length; i++) {
            count2.push((response.data)[i].count)
          }

          lineChartData.userCount.count2 = count2
        })
      })
    },
    // 查询七日内设备量
    getSevenDaysDeviceCount() {
      getSevenDayDeviceDataCount().then(response => {
        let time = []
        let count = []

        response.data.reverse()
        for (let i = 0; i < (response.data).length; i++) {
          time.push((response.data)[i].time)
          count.push((response.data)[i].count)
        }

        this.deviceCountChartData = { xAxisData: time, count, color: '#1556a2', position: 'top' }
      })
    },
    // 查询10款热门设备
    getTopTenDeviceCount() {
      getTopTenDeviceCount().then(response => {
        let time = []
        let count = []

        // response.data.reverse()
        for (let i = 0; i < (response.data).length; i++) {
          time.push((response.data)[i].time)
          count.push((response.data)[i].count)
        }

        this.topTenDeviceChartData = { xAxisData: time, count, color: '#287e45', position: 'top' }
      })
    },

    getGatewayGeoChartCount() {
      getGatewayGeoChartCount().then(response => {
        let tempData = response.data
        let chartData = []
        for (let i = 0, len = tempData.length; i < len; i++) {
          chartData.push({ name: tempData[i].axisData, value: tempData[i].count })
        }

        this.gatewayGroChartData.data = chartData
      })
    }
  }
}

</script>

<style lang="scss" scoped>
.dashboard-editor-container {
  padding: 32px;
  background-color: rgb(240, 242, 245);
  position: relative;

  .chart-wrapper {
    background: #fff;
    padding: 16px 16px 0;
    margin-bottom: 32px;
  }
}

@media (max-width: 1024px) {
  .chart-wrapper {
    padding: 8px;
  }
}
</style>
